<!DOCTYPE html>
<html lang="Zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .app {
            height: 200px;
            background: skyblue;
        }
    </style>
</head>

<body>
    <div class="app"></div>
    <script>
        // 防抖 debounce n秒后执行
        // 节流 throttle n秒内执行一次(前提是不断被触发)
        // 节流 throttle 如果你持续触发事件 那个n秒内只执行一次
        // 首次是否执行 或者 结束是否执行
        // 时间戳 立即执行一次
        function throttleTiming(fn, n) {
            let prev = 0;
            return function () {
                let now = new Date().getTime();
                let context = this,
                    args = arguments;
                if (now - prev >= n) {
                    fn.apply(context, args);
                    prev = now;
                }
            }
        }

        let count = 0;
        document.querySelector('.app').onmousemove = throttle(function () {
            this.innerHTML = count++;
        }, 700);
        // n秒后第一次执行
        function throttle(fn, n) {
            let time;
            // if(time){
            //     return;
            // }
            return function () {
                const context = this,
                    args = arguments;
                if (!time) {
                    time = setTimeout(function () {
                        fn.apply(context, args);
                        time = null;
                    }, n)
                }
            }
        }

        function throttleAll(func, wait, options) {
            var timeout, context, args, result;
            var previous = 0;
            if (!options) options = {};

            var later = function () {
                previous = options.leading === false ? 0 : new Date().getTime();
                timeout = null;
                func.apply(context, args);
                if (!timeout) context = args = null;
            };

            var throttled = function () {
                var now = new Date().getTime();
                if (!previous && options.leading === false) previous = now;
                var remaining = wait - (now - previous);
                context = this;
                args = arguments;
                if (remaining <= 0 || remaining > wait) {
                    if (timeout) {
                        clearTimeout(timeout);
                        timeout = null;
                    }
                    previous = now;
                    func.apply(context, args);
                    if (!timeout) context = args = null;
                } else if (!timeout && options.trailing !== false) {
                    timeout = setTimeout(later, remaining);
                }
            };

            throttled.cancel = function () {
                clearTimeout(timeout);
                previous = 0;
                timeout = null;
            };

            return throttled;
        }
    </script>
</body>

</html>